<template>
  <div class="cinema-detail">
    <div class="cinema-head">
      <div class="return" @click="$router.go(-1)">返回</div>
    </div>
    <h5 class="cinema-name">{{selectCinema.name}}</h5>
    <div class="address"><i><img src="@/assets/address.png" alt=""></i>{{selectCinema.address}}</div>
    <div class="poster-display">
        <img src="https://pic.maizuo.com/usr/movie/4736d8f3eca6aeb2a406a71e8712c8e9.jpg" alt="">
        <ul class="film-list clearfix" @touchstart="start" @touchmove="move">
            <li>
                <img src="https://pic.maizuo.com/usr/movie/bcc1f8442870e5778a5e6382aaf2c008.jpg" alt="">
            </li>
            <li>
                <img src="https://pic.maizuo.com/usr/movie/26b49101af6abc0c9d08b7626bdd3149.jpg" alt="">
            </li>
            <li>
                <img src="https://pic.maizuo.com/usr/movie/e55d5e67f63b39a553e3076d7ff83ed4.jpg" alt="">
            </li>
            <li>
                <img src="https://pic.maizuo.com/usr/movie/a0a1fffdece3e3579d2020d553666d8f.jpg" alt="">
            </li>
        </ul>
    </div>
    <div class="film-list">
        <div class="film-name">
            <h5>蜘蛛侠-平行宇宙</h5>
            <div class="film-dec">
                动作|科幻|动画 | 100分钟 | 鲍勃·佩尔西凯蒂|彼得·拉姆齐|罗德尼·罗斯曼 |  鲍勃·佩尔西凯蒂  彼得·拉姆齐 尼古拉斯·凯奇  沙梅克·摩尔 杰克·约翰逊
            </div>
        </div>
        <ul>
            <li v-for="(item, index) in cinemaFilm" :key="index" class="film-list-item">
                <div class="left">
                    <div class="film-start">
                        {{getHour(item.showAt)}}
                    </div>
                    <div class="film-end">
                        {{getHour(item.endAt)}}散场
                    </div>
                </div>
                <div class="center">
                    <div class="language">
                        {{item.filmLanguage}}
                    </div>
                    <div class="house">
                        {{item.hallName}}
                    </div>
                </div>
                <div class="right">
                    <div class="money">
                        ￥{{item.salePrice/100}}
                    </div>
                    <div class="buy">
                        购票
                    </div>
                </div>
            </li>
        </ul>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import axios from 'axios'
import {Toast} from 'mint-ui'
export default {
  name: 'cinemaDetail',
  data () {
    return {
      selectCinema: null,
      cinemaFilm: [],
      startX: 0,
      startY: 0,
      endX: 0,
      endY: 0
    }
  },
  created () {
    this.getCinemaInfo()
    this.getFilm()
    Toast('查询成功')
  },
  computed: {
    ...mapState([
      'cinema'
    ])
  },
  methods: {
    // 获取我们电影放映的场次
    getFilm () {
      axios.get('/cinema/detail').then((res) => {
        this.cinemaFilm = res.data.data
      })
    },
    getHour (item) {
      var time = new Date(item * 1000)
      var hour = time.getHours()
      var minute = time.getMinutes()
      hour = hour < 10 ? '0' + hour : hour
      minute = minute < 10 ? '0' + minute : minute
      return hour + ':' + minute
    },
    getCinemaInfo () {
      // 从我们的路由对象中获取我们路由传递过来的参数
      console.log(this.$route.query.cinemaId)
      var cinemaId = parseInt(this.$route.query.cinemaId)
      console.log(cinemaId)
      this.cinema.forEach((item, index) => {
        if (cinemaId === item.cinemaId) {
          this.selectCinema = item
        }
      })
    //   this.selectCinema = this.cinema[0]
    },
    start (event) {
      this.startX = event.touches[0].pageX
      this.startY = event.touches[0].pageY
    },
    move (event) {
      var ul = document.getElementsByClassName('film-list')[0]
      var li = ul.children[0]
      this.endX = event.touches[0].pageX
      this.endY = event.touches[0].pageY
      var x = this.startX - this.endX
      var liStyle = window.getComputedStyle(li, null)
      var ulStyle = window.getComputedStyle(ul, null)
      if (x < 0) {
        ul.style.left = ulStyle.left <= '0px' ? '0px' : parseInt(ulStyle.left) + parseInt(liStyle.width) + parseInt(liStyle.marginRight) + 'px'
      }
      if (x > 0) {
        ul.style.left = ulStyle.right <= document.documentElement.clientWidth + 'px' ? document.documentElement.clientWidth + 'px' : parseInt(ulStyle.left) + parseInt(liStyle.width) + parseInt(liStyle.marginRight) + 'px'
      }
    }
  }
}
</script>

<style lang="scss">
@import 'mint-ui/lib/style.css';
@import '@/styles/common/px2rem.scss';
.cinema-detail{
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  .cinema-head{
      position: sticky;
      top: 0;
      left: 0;
      z-index: 1000;
      background: #fff;
      border-bottom: 1px solid #ccc;
      .return{
      height: px2rem(44);
      font-size: px2rem(18);
      line-height: px2rem(44);
      padding-left: px2rem(10);
    }
  }
  .address{
          color: #2c3e50;
          width: px2rem(300);
          height: px2rem(60);
          padding-top: px2rem(20)!important;
          padding-bottom: px2rem(50)!important;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: px2rem(15);
          padding-left: px2rem(15);
          padding-bottom: px2rem(10);
          text-align: center;
          vertical-align: middle;
          img{
              width: px2rem(15);
              height: px2rem(25);
              vertical-align: middle;
              display: inline-block;
              margin-right: px2rem(8);
          }
      }
  .cinema-name{
    position: sticky;
    left: 0;
    top: px2rem(44);
    z-index: 1000;
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    font-size: px2rem(22);
    height: px2rem(54);
    padding: 0 px2rem(5);
    line-height: px2rem(54);
    text-align: center;
    color: #191a1b;
    font-weight: 400;
  }
  .poster-display{
      height: px2rem(160);
      position: relative;
      -webkit-tap-highlight-color: rgba(0,0,0,0);
      &>img{
          width: 100%;
          height: 100%;
          opacity: .9;
          filter: blur(12px);
      }
      .film-list{
          display: flex;
          position: absolute;
          left: 0;
          top: 0;
          background-color: rgba(255,255,255,.6);
          li{
              float: left;
              margin-right: px2rem(20);
              width: px2rem(90);
              height: px2rem(130);
              img{
                  width: 100%;
                  height: 100%;
              }
          }
      }
  }
  .film-list{
        .film-name{
            position: sticky;
            top: px2rem(94);
            left: 0;
            background-color: #fff;
            border-bottom: 1px solid #ccc;
            padding-bottom: px2rem(10);
            h5{
                color: #191a1b;
                font-size: px2rem(15);
                font-weight: 400;
                text-align: center;
                padding: px2rem(10) 0;
            }
            .film-dec{
                color: #797d82;
                padding: 0 px2rem(12);
                font-size: px2rem(13);
                text-align: center;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                height: px2rem(18);
            }
          }
      .film-list-item{
          padding: px2rem(15);
          height: px2rem(74);
          display: flex;
          align-items: center;
          border-bottom: 1px solid #ededed;
          .left{
              width: px2rem(100);
              .film-start{
                  color: #191a1b;
                  font-size: px2rem(15);
              }
              .film-end{
                  color: #797d82;
                  font-size: px2rem(13);
              }
          }
          .center{
              width: px2rem(105);
              .language{
                  color: #191a1b;
                  font-size: px2rem(15)
              }
              .house{
                  color: #797d82;
                  font-size: px2rem(13)
              }
          }
          .right{
              display: flex;
              font-size: px2rem(15);
              color: #ff5f16;
              margin-left: px2rem(10);
              .buy{
                  border: 1px solid #ff5f16;
                  width: px2rem(50);
                  height: px2rem(25);
                  text-align: center;
                  line-height: px2rem(25);
                  margin-left: px2rem(30);
              }
          }
      }
  }
}
</style>
